<template>
  <div>
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="1136px"
      :title="parameter.text"
      wrapClassName="add-modal-container"
      @cancel="closeModal()"
    >
      <div class="curve-modal-body">
        <div class="table-container">
          <vxe-table
            ref="xTable"
            min-height="400px"
            align="center"
            show-overflow
            show-header-overflow
            border="inner"
            :data="tableData"
            :column-config="{ resizable: true }"
            size="small"
            :loading="loading"
          >
            <vxe-column type="seq" width="80" title="序号"></vxe-column>
            <vxe-column field="expertName" title="专家姓名"> </vxe-column>
            <vxe-column field="mobile" title="联系方式"> </vxe-column>
            <vxe-column field="professionTypeDesc" title="专业"> </vxe-column>
            <vxe-column title="状态">
              <template #default="{ row }">
                <div :class="[checkStatusClass(row), 'status-text']">
                  {{ checkStatusName(row) }}
                </div>
              </template>
            </vxe-column>
            <vxe-column
              field="operate"
              width="120"
              title="操作"
              fixed="right"
              align="center"
            >
              <template #default="{ row }">
                <div class="text-button-group">
                  <a-button
                    type="link"
                    @click="sendOne(row)"
                    :disabled="row.notice == 1 ? true : false"
                  >
                    {{ row.notice == 2 ? "重新发送" : "待发送" }}
                  </a-button>
                </div>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
      </div>
      <div class="curve-modal-footer">
        <a-button
          type="primary"
          @click="onSubmit()"
          :loading="buttonLoading"
          :disabled="tableData.length > 0 ? false : true"
        >
          一键通知
        </a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { axios } from "@/utils/request";
export default {
  name: "oneKeyNotice",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    parameter: {
      type: Object,
      default: {},
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          this.getTableData();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      //表格
      loading: false,
      tableData: [],
      buttonLoading: false,
    };
  },
  methods: {
    //查询列表
    getTableData() {
      return new Promise((resolve, reject) => {
        let { uuid, tenantCode } = this.parameter;
        axios
          .post(
            `/probusiness/qeProjectExpert/getExpertList`,
            { tenantCode, evaluationId: uuid },
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            let { data } = res;
            this.tableData = data || [];
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            reject();
          })
          .finally((_) => {});
      });
    },
    //发送通知-单条
    sendOne(row) {
      let that = this;
      that.$confirm({
        title: "提示",
        content: "请确认是否发送通知?",
        okText: "确定",
        cancelText: "取消",
        icon: () =>
          that.$createElement("a-icon", {
            props: {
              key: "warning",
              type: "exclamation-circle",
              twoToneColor: "#faad14",
            },
          }),
        onOk() {
          axios
            .post(
              `/probusiness/qeProjectExpert/sendNoticeOne?uuid=${row.uuid}`,
              {},
              {
                headers: {
                  "Content-Type": "application/json",
                },
              }
            )
            .then((res) => {
              if (res.statusCode === 200 || res === 1) {
                that.$message.success("发送成功", 1.5);
                that.closeModal();
                that.$parent.getData();
              } else {
                that.$message.error(res?.message ?? "发送失败，请稍后重试!");
              }
            })
            .catch((_) => {});
        },
      });
    },

    //提交
    onSubmit() {
      let { uuid, tenantCode } = this.parameter;
      let that = this;
      that.$confirm({
        title: "提示",
        content: "请确认是否发送通知?",
        okText: "确定",
        cancelText: "取消",
        icon: () =>
          that.$createElement("a-icon", {
            props: {
              key: "warning",
              type: "exclamation-circle",
              twoToneColor: "#faad14",
            },
          }),
        onOk() {
          axios
            .post(
              `/probusiness/qeProjectExpert/sendNoticeAll`,
              {
                evaluationId: uuid,
                tenantCode,
              },
              {
                headers: {
                  "Content-Type": "application/json",
                },
              }
            )
            .then((res) => {
              if (res.statusCode === 200 || res === 1) {
                that.$message.success("发送成功", 1.5);
                that.closeModal();
                that.$parent.getData();
              } else {
                that.$message.error(res?.message ?? "发送失败，请稍后重试!");
              }
            })
            .catch((_) => {});
        },
      });
    },

    //关闭弹窗
    closeModal() {
      this.$emit("update:visible", false);
    },

    //校验状态名称
    checkStatusName(row) {
      let { notice } = row;
      switch (notice) {
        case 0:
          return "未发送";

        case 1:
          return "发送成功";

        case 2:
          return "发送失败";

        default:
          return "未发送";
      }
    },

    //校验状态className
    checkStatusClass(row) {
      let { notice } = row;
      switch (notice) {
        case 0:
          return "cancel";

        case 1:
          return "normal";

        case 2:
          return "error";

        default:
          return "cancel";
      }
    },
  },
};
</script>

<style lang="less" scoped>
@primary-color: @primary-color;
/deep/.add-modal-container {
  .ant-modal-body {
    padding: 0 !important;
  }
  .ant-modal-header {
    position: relative;
    .ant-modal-title {
      &::before {
        content: "";
        position: absolute;
        top: 18px;
        left: 10px;
        background-color: @primary-color;
        height: 17px;
        width: 5px;
      }
    }
  }

  .curve-modal-body {
    padding: 14px;
    max-height: 700px;
    display: flex;
    flex-direction: column;
    .table-container {
      flex: 1;
      height: 100%;
      .normal {
        color: #4bc964;
      }
      .error {
        color: #ff3f4a;
      }
      .cancel {
        color: #2a2b2f;
      }
    }
  }
  .curve-modal-footer {
    padding: 10px 16px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #e8e8e8;
    border-radius: 0 0 4px 4px;
    button {
      &:last-child {
        margin-left: 20px;
      }
    }
  }
  .ant-form-item {
    display: flex;
    .ant-form-item-label {
      flex-shrink: 0;
      width: 150px;
    }
    .ant-form-item-control-wrapper {
      flex: 1;
    }
  }
}
</style>
